<template>
  <van-cell-group>
    <div class="tabs-bar">
      <form>
        <van-search v-model="orderId" placeholder="请输入订单号..." @search="onLoad(orderId)" />
      </form>
      <van-tabs v-model="active">
        <van-tab title="订单信息"></van-tab>
        <van-tab title="工作单信息"></van-tab>
      </van-tabs>
    </div>
    <div v-show="active === 0">
      <van-list v-model="loading" :finished="finished" finished-text @load="onLoad(orderId)">
        <div v-show="!loading">
          <van-cell>工作包状态：{{orderInfo.packageState}}</van-cell>
          <van-cell>开始时间：{{orderInfo.beginTime}}</van-cell>
          <van-cell>结束时间：{{orderInfo.finishTime}}</van-cell>
          <van-cell>截至时间：{{orderInfo.deadLine}}</van-cell>
          <van-cell>备注：{{orderInfo.remark}}</van-cell>
        </div>
      </van-list>
    </div>
    <div v-show="active === 1">
      <van-list>
        <van-cell v-for="item in orderInfo.noticeList" :key="item.id">
          <span>{{item.KKScode}}</span>
          <br />
          <span>{{item.description}}</span>
          <br />
          <span>{{item.leader}}</span>
          <span>{{item.progress}}</span>
        </van-cell>
      </van-list>
    </div>
  </van-cell-group>
</template>
<style lang="less" scoped>
</style>
<script>
import { getOrderInfo } from "@/api/data";
export default {
  data() {
    return {
      active: 0,
      orderId: "", //当前订单编号
      orderInfo: {}, //订单信息
      loading: false,
      finished: false
    };
  },
  methods: {
    onLoad(orderId) {
      if (!orderId) {
        this.$toast("请输入订单号");
        return;
      }
      this.loading = true;
      getOrderInfo(orderId).then(res => {
        if (res) {
          this.loading = false;
          this.orderInfo = res.data;
          this.finished = true;
        }
      });
    }
  },
  created() {
    this.ordrerId = this.$route.params.orderId;
  },
  activated() {
    this.orderId = this.$route.params.orderId;
  },
  deactivated() {}
};
</script>
